<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="(item,index) in inspectionStepsList" :key="item.id" :label="item.procedureName" :name="item.procedureId">
        <table border="1" class="workTable">
          <tr>
            <td colspan="2" class="boldText">检验指导书</td>
            <td colspan="2">产品名称: {{materialName}}</td>
            <td><span class="required">*</span>编号</td>
            <td>
              <el-input size="mini" maxlength="10" v-model="item.instructionsNo" placeholder="请输入编号"></el-input>
            </td>
          </tr>
          <tr>
            <td class="table1Td">客户名称</td>
            <td>{{customerName}}</td>
            <td class="table1Td"><span class="required">*</span>工序名称</td>
            <td>
              {{item.procedureName}}
            </td>
            <td class="table1Td"><span class="required">*</span>最后修订日期</td>
            <td>
              <el-date-picker size="mini" v-model="item.lastUpdateDate" type="date" placeholder="选择日期">
              </el-date-picker>
            </td>
          </tr>
          <tr>
            <td>客户图号</td>
            <td>{{customerDrawingNo}}</td>
            <td>车间</td>
            <td>{{produceShopName}}</td>
            <td>版本</td>
            <td>
              <el-input size="mini" v-model="item.version" maxlength="10" placeholder="请输入版次"></el-input>
            </td>
          </tr>
        </table>
        <table border="1" class="workTable">
          <tr>
            <td>设备/工装名称</td>
            <td>设备/工装编号</td>
            <td>原辅材料</td>
            <td>规格型号</td>
            <td>定额</td>
          </tr>
          <tr v-if="equipmentList.length==0">
            <td colspan="5">
              <avue-empty></avue-empty>
            </td>
          </tr>
          <tr v-if="equipmentList.length>0" v-for="(euip,index) in equipmentList" :key="index">
            <td>{{euip.equipmentName}}</td>
            <td>{{euip.equipmentNo}}</td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr class="workpieceTr">
            <td></td>
            <td>工件来源</td>
            <td>{{item.artifactCome}}</td>
            <td>工件去处</td>
            <td>{{item.artifactOut}}</td>
          </tr>
          <tr>
            <td colspan="5">
              <el-upload v-if="type=='edit'" class="upload-demo" action="/api/attach/uploadFile" :headers="headers" :on-success="handleSuccess" :show-file-list="false" :before-upload="beforeUpload" multiple>
                <el-button :loading="item.uploadLoading" size="mini" type="primary" @click="uploadClick(item)">点击上传</el-button>
              </el-upload>
              <div class="step-file" v-show="item.filePath" v-for="(path,fileIndex) in item.filePath.split(',')">
                <el-image style="width: 100px; height: 100px;" :src="path" fit="contain"></el-image>
                <!-- <img :src="path" style="height: 100px;" /> -->
                <i v-if="type=='edit'" class="closeIcon el-icon-close" @click.stop="deleteFile(item,fileIndex)"></i>
              </div>
            </td>
          </tr>
        </table>
        <avue-crud class="top15" :option="sopoption" :table-loading="loading" :data="item.stepList" ref="sopcrud" v-model="obj" @row-update="addUpdate" @row-del="rowDel" @row-save="rowSave" @refresh-change="refreshChange" @on-load="onLoad">
          <template slot-scope="{row}" slot='testItems'>
            <span v-if="row.testItemsType=='1'">{{row.testItems}}</span>
            <el-image v-else style="width: 40px; height: 40px" :src="row.testItems" :preview-src-list="[row.testItems]">
            </el-image>
          </template>
        </avue-crud>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getProProcessList } from '@/api/project/productData/processData';
import {
  getCustomerAndDrawingNo,
  getPreviousAndNextProcedure,
  getEquipmentByProcedureId,
  getControlPlanByProcedureId,
} from '@/api/projectplan/sop';
import { init } from '@/mixins/init';
export default {
  mixins: [init],
  props: {
    projectId: {
      type: String,
    },
    productId: {
      type: String,
    },
    materialName: {
      type: String,
    },
    type: {
      type: String,
    },
    activeName: {
      type: String,
      default: '',
    },
    sopform: {
      type: Object,
    },
    inspectionStepsList: {
      type: Array,
    },
  },
  data() {
    return {
      sopType: 'add',
      obj: {},
      uploadRow: {},
      procedureOptions: [],
      customerDrawingNo: '',
      customerName: '',
      produceShopName: '',
      equipmentList: [],
      sopoption: {
        index: true,
        indexLabel: '序号',
        addBtn: false,
        editBtn: false,
        delBtn: false,
        header: false,
        menu: false,
        column: [
          {
            label: '检验项目',
            prop: 'testItems',
            slot: true,
            overHidden: true,
          },
          {
            label: '特殊等级',
            prop: 'specialGrade',
            width: 80,
            align: 'center',
            overHidden: true,
            type: 'select',
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=featureType',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
          },
          {
            label: '检验频率',
            prop: 'testFrequency',
            overHidden: true,
          },
          {
            label: '使用量具',
            prop: 'useMeasuringTool',
            overHidden: true,
          },
          {
            label: '控制方法',
            prop: 'controlMethod',
            overHidden: true,
          },
          {
            label: '异常处理',
            prop: 'exceptionHandling',
            minWidth: 150,
            cell: true,
            rules: [
              {
                required: true,
                message: '请输入异常处理',
                trigger: 'blur',
              },
            ],
          },
        ],
      },
      currentIndex: 0,
    };
  },
  created() {
    // if (this.data.length > 0) {
    //   this.sopType = 'edit/view';
    // }
    console.log(this.type);
    if (this.type == 'edit') {
      this.option.header = true;
      this.option.menu = true;
    } else {
      this.option.header = false;
      this.option.menu = false;
    }
    getProProcessList({ productId: this.productId }).then((res) => {
      const data = res.data.data;
      this.procedureOptions = data;
    });
    getCustomerAndDrawingNo({ projectId: this.projectId, productId: this.productId }).then((res) => {
      const data = res.data.data;
      this.customerDrawingNo = data.customerDrawingNo;
      this.customerName = data.customerName;
    });
  },
  watch: {
    activeName(val, oldVal) {
      if (val) {
        // this.sopType = 'edit/view';
        this.procedureOptions.every((item) => {
          if (item.id == val) {
            this.produceShopName = item.produceShopName;
            return false;
          } else {
            return true;
          }
        });
        // getPreviousAndNextProcedure({ productId: this.productId, procedureId: val }).then((res) => {
        //   const data = res.data.data;
        //   this.sopform.artifactCome = data.artifactCome;
        //   this.sopform.artifactOut = data.artifactOut;
        // });
        getEquipmentByProcedureId({ procedureId: val }).then((res) => {
          const data = res.data.data;
          this.equipmentList = data;
        });
        if (this.inspectionStepsList.length > 0) {
          if (this.inspectionStepsList[this.currentIndex].stepList.length == 0) {
            getControlPlanByProcedureId({ productId: this.productId, procedureId: val }).then((res) => {
              const data = res.data.data;
              if (this.type == 'edit') {
                this.inspectionStepsList[this.currentIndex].stepList = data.map((item) => {
                  item.exceptionHandling = '';
                  item.$cellEdit = true;
                  return item;
                });
              }
            });
          } else {
            let stepList = this.inspectionStepsList[this.currentIndex].stepList;
            if (this.type == 'edit') {
              this.inspectionStepsList[this.currentIndex].stepList = stepList.map((item) => {
                // item.exceptionHandling = '';
                item.$cellEdit = true;
                return item;
              });
            }
          }
        }
      }
    },
  },
  methods: {
    uploadClick(row) {
      this.uploadRow = row;
    },
    beforeUpload(file) {
      this.$set(this.uploadRow, 'uploadLoading', true);
      var reg = /^.*\.(?:jpg|jpeg|png)$/i;
      if (!reg.test(file.name)) {
        this.$message.error('请上传jpg、jpeg或png格式文件!');
        this.$set(this.uploadRow, 'uploadLoading', false);
        return false;
      }
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error(`上传文件大小不能超过 10MB!`);
        this.$set(this.uploadRow, 'uploadLoading', false);
        return false;
      }
      return true;
    },
    handleSuccess(response) {
      this.$set(this.uploadRow, 'uploadLoading', false);
      if (this.uploadRow.filePath) {
        let filePath = this.uploadRow.filePath;
        let fileList = filePath.split(',');
        fileList.push(response.data.link);
        this.uploadRow.filePath = fileList.join(',');
      } else {
        this.uploadRow.filePath = response.data.link;
      }
    },
    deleteFile(row, fileIndex) {
      this.uploadRow = row;
      let fileList = row.filePath.split(',');
      fileList.splice(fileIndex, 1);
      this.inspectionStepsList[this.currentIndex].filePath = fileList.join(',');
    },
    handleClick(tab) {
      this.activeName = tab.name;
      this.currentIndex = parseInt(tab.index);
    },
  },
};
</script>
<style lang="scss">
.workTable {
  width: 100%;
  border: 1px solid #6b94c1;
  font-size: 12px;
  td {
    font-size: 12px;
    line-height: 21.5px;
    height: 22px;
    padding: 0 10px;
  }
  .required {
    color: #f56c6c;
    margin-right: 4px;
  }
  .workpieceTr {
    td {
      border-top: 2px solid #6b94c1;
    }
  }
  .boldText {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
  }
  .table1Td {
    width: 100px;
  }
}
.top15 {
  margin-top: 15px !important;
  width: 100%;
}
.upload-demo {
  margin: 5px 0;
}
.step-file {
  display: inline-block;
  position: relative;
  margin: 5px;
  .closeIcon {
    display: none;
    position: absolute;
    font-size: 12px;
    top: 5px;
    right: 5px;
    cursor: pointer;
    opacity: 0.75;
    color: #606266;
  }
  &:hover {
    .closeIcon {
      display: inline-block;
    }
  }
}
</style>
